<!doctype html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
	<meta name="keywords" content="Classtyle,OpenCSS,HTML,XHTML,CSS,Framework" />
	<meta name="description" content="Classtyle是一个轻巧、易用的CSS框架。它以“模块化”的(x)HTML+CSS为基础，提供了多种布局及栅格系统。通过“Classtyle OpenCSS”扩展，可以为Classtyle提供无限多的功能。" />
	<title>Classtyle Grids</title>
	<link href="http://classtyle.com/css/style.css" rel="stylesheet" type="text/css" />
	<script type="text/javascript">
		var _gaq = _gaq || [];
		_gaq.push(['_setAccount', 'UA-18232636-1']);
		_gaq.push(['_setDomainName', '.classtyle.com']);
		_gaq.push(['_trackPageview']);

		(function() {
			var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
			ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
			var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
		})();
	</script>
</head>
<body>
<div class="page">
	<div class="phd">
		<div id="mLogo" class="mod">
			<h1>Classtyle</h1>
			<h2>CSS框架</h2>
		</div>
	</div>
	<div class="pbd">
		<div id="mDocBanner" class="mod mod-banner">
		</div>
		<div id="mDoc" class="mod mod-main">
			<h3>栅格系统</h3>
			<p>　　Classtyle的栅格系统将950像素的页面划分为12格，每格宽度为70像素，栅格之间的间隔宽度为10像素。</p>
			<p>　　栅格系统能非常快捷的搭建页面布局，但同时也破坏了结构与表现的分离，也无法使主栏内容始终优先于侧栏内容显示。</p>
			<p>　　因此，如果您需要在非常短的时间内搭建众多布局相对固定的页面，建议您使用栅格系统。</p>
			<p>　　在Classtyle中，使用<strong>.cs-gs</strong>（Classtyle Grids System）作为栅格系统的容器。</p>
			<p>　　每个栅格由<strong>.cs-g-x</strong>控制宽度，x取值为1~12。</p>
			<p>
				<table class="lib">
					<thead>
						<tr>
							<th>class</th>
							<th>宽度（px）</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>.cs-g-1</td>
							<td>70</td>
						</tr>
						<tr>
							<td>.cs-g-2</td>
							<td>150</td>
						</tr>
						<tr>
							<td>.cs-g-3</td>
							<td>230</td>
						</tr>
						<tr>
							<td>.cs-g-4</td>
							<td>310</td>
						</tr>
						<tr>
							<td>.cs-g-5</td>
							<td>390</td>
						</tr>
						<tr>
							<td>.cs-g-6</td>
							<td>470</td>
						</tr>
						<tr>
							<td>.cs-g-7</td>
							<td>550</td>
						</tr>
						<tr>
							<td>.cs-g-8</td>
							<td>630</td>
						</tr>
						<tr>
							<td>.cs-g-9</td>
							<td>710</td>
						</tr>
						<tr>
							<td>.cs-g-10</td>
							<td>790</td>
						</tr>
						<tr>
							<td>.cs-g-11</td>
							<td>870</td>
						</tr>
						<tr>
							<td>.cs-g-12</td>
							<td>950</td>
						</tr>
					</tbody>
				</table>
			</p>
			<p class="cs-txt-tips">
				每行总宽度为12个栅格宽度，因此在使用栅格进行多栏布局时，每行的栅格之和应等于12，如：
<code>&lt;div class="<strong>cs-gs</strong>"&gt;
&lt;div class="<strong>cs-g-4</strong>"&gt;
...
&lt;/div&gt;
&lt;div class="<strong>cs-g-8</strong>"&gt;
...
&lt;/div&gt;
&lt;/div&gt;</code>
				<strong>.cs-g-4</strong>与<strong>.cs-g-8</strong>：4 + 8 = 12。
			</p>
			<p>
<code>&lt;div class="<strong>cs-gs</strong>"&gt;
&lt;div class="<strong>cs-g-3</strong>"&gt;
...
&lt;/div&gt;
&lt;div class="<strong>cs-g-7</strong>"&gt;
...
&lt;/div&gt;
&lt;div class="<strong>cs-g-2</strong>"&gt;
...
&lt;/div&gt;
&lt;/div&gt;</code>
				<strong>.cs-g-3</strong>、<strong>.cs-g-7</strong>与<strong>.cs-g-2</strong>：3 + 7 + 2 = 12。
			</p>
			<p class="cs-txt-tips">您也可以在Classtyle框架自身的页面结构基础上使用栅格系统：
<code>&lt;div class="page <strong>cs-gs</strong>"&gt;
...
&lt;div class="pbd"&gt;
&lt;div class="part pt-1 <strong>cs-g-3</strong>"&gt;
...
&lt;/div&gt;
&lt;div class="part pt-2 <strong>cs-g-6</strong>"&gt;
...
&lt;/div&gt;
&lt;div class="part pt-3 <strong>cs-g-3</strong>"&gt;
...
&lt;/div&gt;
&lt;/div&gt;
...
&lt;/div&gt;</code>
			</p>
		</div>
	</div>
	<div class="pft">
		<div id="mCopyright" class="mod">
			Copyright &copy; 2008-2011 CSwui Team | <a href="mailto:classtyle@cswui.com">classtyle@cswui.com</a>
		</div>
	</div>
</div>
</body>
</html>